<template>
    <pageLayoutContent class="personal">
        <h3>个人中心</h3>
        <a-tabs :activeKey="defaultActiveKey" @change="callback">
            <a-tab-pane key="1" tab="个人信息" class="personal-tab">
                <a-form :form="form" class="personal-tab-form">
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="用户名"
                    >
                        admin
                    </a-form-item>
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="姓名"
                    >
                        <a-input
                                v-decorator="[
                                  'username',
                                ]"
                                placeholder="请输入姓名"
                        />
                    </a-form-item>
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="联系电话"
                    >
                        <a-input
                                v-decorator="[
                                  'phone',
                                ]"
                                placeholder="请输入联系电话"
                        />
                    </a-form-item>
                    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                        <a-button style="width: 150px;" type="primary" @click="check">
                            保存
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
            <a-tab-pane key="2" tab="修改密码" force-render>
                <a-form :form="passform" class="personal-tab-form">
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="原密码"
                    >
                        <a-input
                                v-decorator="[
                                  'password',
                                ]"
                                placeholder="请输入原密码"
                        />
                    </a-form-item>
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="新密码"
                    >
                        <a-input
                                v-decorator="[
                                  'newPassword',
                                ]"
                                placeholder="请输入新密码"
                        />
                    </a-form-item>
                    <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="确认密码"
                    >
                        <a-input
                                v-decorator="[
                                  'confirmPassword',
                                ]"
                                placeholder="请再次输入密码"
                        />
                    </a-form-item>
                    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                        <a-button style="width: 150px;" type="primary" @click="check">
                            确定
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>
    </pageLayoutContent>
</template>

<script>
    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 12},
    };
    const formTailLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 6, offset: 6},
    };
    import pageLayoutContent from "../../components/pageLayoutContent";

    export default {
        name: "personal",
        components: {
            pageLayoutContent,
        },
        data() {
            return {
                formItemLayout,
                formTailLayout,
                form: this.$form.createForm(this, {}),
                passform: this.$form.createForm(this, {}),
                defaultActiveKey: '1',
            };
        },
        created() {
            this.defaultActiveKey = this.$route.query.tab ? this.$route.query.tab + '' : '1';
            this.$nextTick(() => {
                this.form.setFieldsValue({username: "张辽", phone: 15822222222})
            })
        },
        methods: {
            callback(key) {
                this.defaultActiveKey = key;
            },
            check() {
                this.form.validateFields(err => {
                    if (!err) {
                        console.info('success');
                    }
                });
            },
            handleChange(e) {
                this.checkNick = e.target.checked;
                this.$nextTick(() => {
                    this.form.validateFields(['nickname'], {force: true});
                });
            },
        },
    }
</script>

<style lang="less">
    .personal {
        h3 {
            padding: 30px 30px 0 30px;
            font-weight: normal;
            color: rgba(80, 80, 80, 1);
            font-size: 16px;
            text-indent: 16px;
        }

        &-tab-form {
            width: 500px;
            margin: 20px 0;
        }

        .ant-tabs-bar {
            padding: 0 30px !important;
        }
    }
</style>